<template>
  <div class="adminInfo">
    <div class="adminMsg">
      <h2>密码修改</h2>
      <el-form ref="passForm" :label-position="'top'" :model="passForm" :rules="rules" status-icon>
        <el-form-item label="原密码" prop="oldPassword">
          <el-input v-model="passForm.oldPassword" autocomplete="off" placeholder="请输入原密码" type="password"></el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="newPassword">
          <el-input v-model="passForm.newPassword" autocomplete="off" placeholder="请输入新密码" type="password" ></el-input>
        </el-form-item>
        <el-form-item label="确认新密码" prop="checkPassword">
          <el-input v-model="passForm.checkPassword" autocomplete="off" placeholder="请再次输入密码" type="password"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submit" >提交</el-button>
          <el-button @click="reset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import router from "@/router";

export default {
  name: "AdminPassword",
  data() {
    const validatePass = (rule, value, callback)=>{
      if (value === ''){
        callback(new Error('请输入新密码'));
      }else{
        if (this.passForm.checkPassword !== ''){
          this.$refs.passForm.validateField('checkPassword');
        }
        callback();
      }
    };
    const validatePass2 = (rule, value, callback)=>{
      if (value === ''){
        callback(new Error('请再次输入密码'));
      }else if (value !== this.passForm.newPassword){
        callback(new Error('两次输入密码不一致'));
      }else{
        callback();
      }
    };
    return {
      passForm:{
        oldPassword:'',
        newPassword:'',
        checkPassword:'',
      },
      rules:{
        oldPassword: [
          { required: true,  message: '请输入原密码', trigger: 'blur' },
        ],
        newPassword:[
          { required: true,  validator: validatePass, trigger: 'blur'},
        ],
        checkPassword:[
          { required: true,  validator: validatePass2, trigger: 'blur'},
        ]
      }
    }
  },
  methods: {
    submit(){
      this.$refs.passForm.validate(valid => {
        if (valid){
          console.log(this.passForm.newPassword)
          console.log(this.passForm.checkPassword)
          axios({
            url:"http://localhost:8090/user/updatePass",
            method: 'post',
            data: this.passForm
          }).then(res => {
            if (res.code === '200'){
             this.$message.success('密码修改成功，请重新登录')
              setTimeout(()=>{
                localStorage.clear();
                router.push('/index')
                location.reload();
              },2000)
            }else{
              this.$message.error(res.msg)
            }
          })
        }else{
          return false;
        }
      })
    },

    //重置：即清空用户输入的内容
    reset(){
     this.$refs.passForm.resetFields();
    },
  }
}
</script>

<style scoped>
.adminInfo{
  width: 1200px;
  min-height: 750px;
  background-color: white;
  padding: 20px 50px;
}

.adminMsg{
  width: 1000px;
  height: 700px;
  background-color: white;
  border-radius: 15px;
  padding: 20px 100px;
  box-shadow: 0 0px 14px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)
}

.adminMsg h2{
  font-size: 20px;
  font-weight: 600;
  margin-buttom: 15px;
  margin-left: 0px;
}
</style>